/**
 * 加载组件样式
 * @description 自定义加载组件的样式定义
 */

.loading {
  /* 基础样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

/* 独立使用模式 */
.loading.standalone {
  padding: 40px 20px;
  min-height: 120px;
}

/* 包装器模式 */
.loading.wrapper {
  position: relative;
  min-height: 60px;
}

.loading.wrapper .content {
  transition: opacity 0.3s ease;
}

.loading.wrapper :global(.ant-spin-spinning) .content {
  opacity: 0.5;
  pointer-events: none;
}

/* 不同尺寸 */
.loading.small {
  padding: 20px 10px;
  min-height: 60px;
  gap: 8px;
}

.loading.large {
  padding: 60px 30px;
  min-height: 180px;
  gap: 16px;
}

/* 点状指示器 */
.dotsIndicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
  animation: dotPulse 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

.dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes dotPulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 脉冲指示器 */
.pulseIndicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #1890ff;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* 骨架屏指示器 */
.skeletonIndicator {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeletonLine {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeletonLoading 1.5s infinite;
}

.skeletonLine:nth-child(1) {
  width: 100%;
}

.skeletonLine:nth-child(2) {
  width: 80%;
}

.skeletonLine:nth-child(3) {
  width: 60%;
}

@keyframes skeletonLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 加载文本样式 */
.loading :global(.ant-spin-text) {
  color: #8c8c8c;
  font-size: 14px;
  margin-top: 8px;
}

.tipText {
  color: #8c8c8c;
  font-size: 14px;
  margin-top: 8px;
  text-align: center;
}

.loading.small :global(.ant-spin-text) {
  font-size: 12px;
  margin-top: 6px;
}

.loading.large :global(.ant-spin-text) {
  font-size: 16px;
  margin-top: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .loading.standalone {
    padding: 30px 15px;
    min-height: 100px;
  }

  .loading.large {
    padding: 40px 20px;
    min-height: 140px;
  }

  .skeletonIndicator {
    width: 150px;
  }
}

/* 深色主题适配 */
[data-theme='dark'] .dot {
  background-color: #177ddc;
}

[data-theme='dark'] .pulseIndicator {
  background-color: #177ddc;
}

[data-theme='dark'] .skeletonLine {
  background: linear-gradient(90deg, #262626 25%, #1f1f1f 50%, #262626 75%);
  background-size: 200% 100%;
}

[data-theme='dark'] .loading :global(.ant-spin-text) {
  color: #8c8c8c;
}

/* 全屏加载样式 */
.loading.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  backdrop-filter: blur(2px);
}

[data-theme='dark'] .loading.fullscreen {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 内联加载样式 */
.loading.inline {
  display: inline-flex;
  padding: 0;
  min-height: auto;
  gap: 8px;
}

.loading.inline :global(.ant-spin) {
  display: inline-flex;
  align-items: center;
}

/* 加载容器的过渡效果 */
.loading :global(.ant-spin-container) {
  transition: all 0.3s ease;
}

/* 自定义 Spin 组件样式 */
.loading :global(.ant-spin-dot) {
  font-size: inherit;
}

.loading :global(.ant-spin-dot-item) {
  background-color: #1890ff;
}

[data-theme='dark'] .loading :global(.ant-spin-dot-item) {
  background-color: #177ddc;
}